<template>
    <div class="tenant-list-container">
        <div>
            <el-button type="primary" @click="editType='add';editInfo=null;dialogVisible=true">新增</el-button>
        </div>
        <div class="table-content">
            <el-table :data="datas" style="width: 100%">
                <el-table-column type="index" />
                <el-table-column prop="name" label="Name" />
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button size="small"
                                   @click="handleEditClick(scope.$index, scope.row)"
                        >编辑</el-button
                        >
                        <el-button
                            size="small"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)"
                        >Delete</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-box">
                <el-pagination
                    v-model:current-page="tenantParams.pageIndex"
                    v-model:page-size="tenantParams.pageSize"
                    :page-sizes="[10, 20, 30, 40]"
                    :small="true"
                    :background="false"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="totalCount"
                    @size-change="getTenants"
                    @current-change="getTenants"
                />
            </div>
        </div>
        <TenantDialog :editObject="editInfo" :type="editType" v-model:dialogVisible="dialogVisible" @hanldeRequest="getTenants"/>
    </div>
</template>

<script setup>
import { reactive, ref, watch } from 'vue'
import TenantDialog from './components/TenantDialog.vue'
import {tenantsPage,tenantsDelete} from '@/api/tenant'
import { ElMessage, ElMessageBox } from 'element-plus'

defineOptions({
  name: "TenantList",
});

const dialogVisible = ref(false);
const editType = ref('add');
const editInfo = ref(null);
const tenantParams = ref({
  pageIndex:1,
  pageSize:10
})
const totalCount = ref(0)
const datas = ref([])
async function getTenants() {
  const res = await tenantsPage(tenantParams.value)
  datas.value = res?.items ?? [];
  totalCount.value = res?.totalCount ?? 0
}

function handleDelete(index,row) {
  ElMessageBox.confirm(
    '是否删除?',
    'Warning',
    {
      confirmButtonText: 'OK',
      cancelButtonText: 'Cancel',
      type: 'warning',
    }
  )
    .then(async () => {
      await tenantsDelete({id:row.id})
      ElMessage({
        type: 'success',
        message: 'Delete completed',
      })
      getTenants();
    })
}

function handleEditClick(index,row) {
  editInfo.value = row;
  editType.value = 'edit';
  dialogVisible.value = true;
}
getTenants()

</script>

<style lang="scss" scoped>
.tenant-list-container {
  padding: 20px;
  .table-content {
    margin-top: 20px;
    .pagination-box {
      margin-top: 15px;
      text-align: center;
    }
  }
}
</style>